<template>
  <div class="step-tracking">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="status-left">9:41</div>
      <div class="status-right">
        <div class="signal"></div>
        <div class="wifi"></div>
        <div class="battery"></div>
      </div>
    </div>

    <!-- 头部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </div>
      <h1 class="title">步数</h1>
    </div>

    <!-- 时间筛选标签 -->
    <div class="time-tabs">
      <div
        v-for="tab in timeTabs"
        :key="tab.key"
        :class="['time-tab', { active: activeTimeTab === tab.key }]"
        @click="setTimeTab(tab.key)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 步数圆形进度 -->
      <div class="steps-circle">
        <div class="progress-ring">
          <svg class="progress-svg" width="280" height="280" viewBox="0 0 280 280">
            <!-- 背景圆环 -->
            <circle
              cx="140"
              cy="140"
              r="120"
              stroke="#E8F4FD"
              stroke-width="12"
              fill="none"
            />
            <!-- 进度圆环 -->
            <circle
              cx="140"
              cy="140"
              r="120"
              stroke="#4A90E2"
              stroke-width="12"
              fill="none"
              stroke-linecap="round"
              :stroke-dasharray="circumference"
              :stroke-dashoffset="strokeDashoffset"
              transform="rotate(-90 140 140)"
            />
          </svg>
          
          <!-- 中心内容 -->
          <div class="circle-content">
            <div class="shoe-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4A90E2" stroke-width="2">
                <path d="M4 4h16c2.2 0 4 1.8 4 4v8c0 2.2-1.8 4-4 4H4c-2.2 0-4-1.8-4-4V8c0-2.2 1.8-4 4-4z"/>
                <path d="M8 12h8"/>
                <path d="M8 16h6"/>
              </svg>
            </div>
            <div class="step-count">{{ currentSteps }}</div>
            <div class="step-label">Steps</div>
            <div class="target-info">
              <span class="target-label">目标</span>
              <span class="target-value">{{ targetSteps }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 附加指标 -->
      <div class="additional-metrics">
        <div class="metric-item">
          <div class="metric-icon distance">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
            </svg>
          </div>
          <div class="metric-value">{{ distance }}</div>
          <div class="metric-label">km</div>
        </div>
        
        <div class="metric-item">
          <div class="metric-icon calories">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
          </div>
          <div class="metric-value">{{ calories }}</div>
          <div class="metric-label">大卡</div>
        </div>
        
        <div class="metric-item">
          <div class="metric-icon time">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="12,6 12,12 16,14"/>
            </svg>
          </div>
          <div class="metric-value">{{ activeTime }}</div>
          <div class="metric-label">小时</div>
        </div>
      </div>

      <!-- 周趋势图 -->
      <div class="weekly-trend">
        <h3 class="trend-title">本周趋势</h3>
        <div class="trend-chart">
          <div class="chart-container">
            <div class="chart-area">
              <svg width="100%" height="120" viewBox="0 0 300 120" preserveAspectRatio="none">
                <!-- 区域填充 -->
                <defs>
                  <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3"/>
                    <stop offset="100%" style="stop-color:#4A90E2;stop-opacity:0.1"/>
                  </linearGradient>
                </defs>
                
                <!-- 区域路径 -->
                <path
                  :d="areaPath"
                  fill="url(#areaGradient)"
                />
                
                <!-- 线条路径 -->
                <path
                  :d="linePath"
                  stroke="#4A90E2"
                  stroke-width="2"
                  fill="none"
                />
                
                <!-- 数据点 -->
                <circle
                  v-for="(point, index) in weeklyData"
                  :key="index"
                  :cx="point.x"
                  :cy="point.y"
                  r="3"
                  fill="#4A90E2"
                />
              </svg>
            </div>
            
            <!-- X轴标签 -->
            <div class="x-axis">
              <div
                v-for="(day, index) in weekDays"
                :key="index"
                class="day-label"
              >
                {{ day }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 历史记录 -->
      <div class="history-section">
        <h3 class="history-title">历史记录</h3>
        <div class="history-list">
          <div
            v-for="record in historyRecords"
            :key="record.id"
            class="history-item"
          >
            <div class="history-date">
              <div class="date">{{ record.date }}</div>
              <div class="day">{{ record.day }}</div>
            </div>
            <div class="history-stats">
              <div class="stat-row">
                <span class="stat-label">步数:</span>
                <span class="stat-value">{{ record.steps }}</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">距离:</span>
                <span class="stat-value">{{ record.distance }}km</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">卡路里:</span>
                <span class="stat-value">{{ record.calories }}大卡</span>
              </div>
            </div>
            <div class="history-status" :class="record.status">
              {{ record.statusText }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式状态
const activeTimeTab = ref('day')
const currentSteps = ref(7384)
const targetSteps = ref(10000)
const distance = ref('1.2')
const calories = ref('182')
const activeTime = ref('1小时40分钟')

// 时间标签
const timeTabs = [
  { key: 'day', label: '日' },
  { key: 'week', label: '周' },
  { key: 'month', label: '月' }
]

// 周数据
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const weeklyData = ref([
  { x: 30, y: 80, value: 8000 },
  { x: 70, y: 60, value: 6000 },
  { x: 110, y: 90, value: 9000 },
  { x: 150, y: 70, value: 7000 },
  { x: 190, y: 85, value: 8500 },
  { x: 230, y: 95, value: 9500 },
  { x: 270, y: 75, value: 7500 }
])

// 历史记录
const historyRecords = ref([
  {
    id: 1,
    date: '12月15日',
    day: '周五',
    steps: 8234,
    distance: 1.5,
    calories: 198,
    status: 'completed',
    statusText: '已完成'
  },
  {
    id: 2,
    date: '12月14日',
    day: '周四',
    steps: 7654,
    distance: 1.3,
    calories: 182,
    status: 'completed',
    statusText: '已完成'
  },
  {
    id: 3,
    date: '12月13日',
    day: '周三',
    steps: 6890,
    distance: 1.1,
    calories: 165,
    status: 'partial',
    statusText: '部分完成'
  },
  {
    id: 4,
    date: '12月12日',
    day: '周二',
    steps: 10234,
    distance: 1.8,
    calories: 245,
    status: 'completed',
    statusText: '已完成'
  },
  {
    id: 5,
    date: '12月11日',
    day: '周一',
    steps: 5678,
    distance: 0.9,
    calories: 136,
    status: 'partial',
    statusText: '部分完成'
  }
])

// 计算属性
const circumference = computed(() => 2 * Math.PI * 120)
const strokeDashoffset = computed(() => {
  const progress = currentSteps.value / targetSteps.value
  return circumference.value * (1 - progress)
})

const areaPath = computed(() => {
  const points = weeklyData.value.map(point => `${point.x},${point.y}`).join(' ')
  return `M ${points} L 270 120 L 30 120 Z`
})

const linePath = computed(() => {
  const points = weeklyData.value.map(point => `${point.x},${point.y}`).join(' ')
  return `M ${points}`
})

// 方法
const goBack = () => {
  router.back()
}

const setTimeTab = (tab: string) => {
  activeTimeTab.value = tab
  // 这里可以根据时间标签更新数据
  updateDataByTimeTab(tab)
}

const updateDataByTimeTab = (tab: string) => {
  // 模拟根据时间标签更新数据
  if (tab === 'day') {
    currentSteps.value = 7384
    distance.value = '1.2'
    calories.value = '182'
    activeTime.value = '1小时40分钟'
  } else if (tab === 'week') {
    currentSteps.value = 52340
    distance.value = '8.5'
    calories.value = '1256'
    activeTime.value = '12小时30分钟'
  } else if (tab === 'month') {
    currentSteps.value = 215680
    distance.value = '35.2'
    calories.value = '5176'
    activeTime.value = '52小时15分钟'
  }
}

// 生命周期
onMounted(() => {
  // 初始化数据
  updateDataByTimeTab('day')
})
</script>

<style scoped lang="scss">
.step-tracking {
  min-height: 100vh;
  background: white;
  position: relative;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #4A90E2;
  color: white;
  font-size: 14px;
  font-weight: 600;

  .status-right {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .signal, .wifi, .battery {
    width: 20px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
  }

  .signal {
    background: linear-gradient(90deg, #fff 0%, #fff 80%, transparent 80%);
  }

  .wifi {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 3px, #fff 3px, #fff 6px, transparent 6px);
  }

  .battery {
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      right: -3px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 6px;
      background: #fff;
      border-radius: 0 1px 1px 0;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;

  .back-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    margin-right: 15px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background: #e8e8e8;
    }
  }

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }
}

.time-tabs {
  display: flex;
  background: white;
  padding: 0 20px;
  border-bottom: 1px solid #f0f0f0;

  .time-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;

    &.active {
      color: #4A90E2;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background: #4A90E2;
        border-radius: 2px;
      }
    }

    &:hover {
      color: #4A90E2;
    }
  }
}

.content {
  padding: 20px;
  background: #f8f9fa;
  min-height: calc(100vh - 200px);
}

.steps-circle {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;

  .progress-ring {
    position: relative;
    width: 280px;
    height: 280px;

    .progress-svg {
      transform: rotate(-90deg);
    }

    .circle-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 200px;

      .shoe-icon {
        margin-bottom: 10px;
      }

      .step-count {
        font-size: 36px;
        font-weight: 700;
        color: #333;
        margin-bottom: 5px;
      }

      .step-label {
        font-size: 14px;
        color: #999;
        margin-bottom: 15px;
      }

      .target-info {
        .target-label {
          font-size: 12px;
          color: #999;
          margin-right: 5px;
        }

        .target-value {
          font-size: 16px;
          font-weight: 600;
          color: #4A90E2;
        }
      }
    }
  }
}

.additional-metrics {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;

  .metric-item {
    text-align: center;

    .metric-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
      background: #4A90E2;
    }

    .metric-value {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
    }

    .metric-label {
      font-size: 12px;
      color: #999;
    }
  }
}

.weekly-trend {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .trend-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
  }

  .trend-chart {
    .chart-container {
      position: relative;

      .chart-area {
        margin-bottom: 20px;
      }

      .x-axis {
        display: flex;
        justify-content: space-between;
        padding: 0 15px;

        .day-label {
          font-size: 12px;
          color: #666;
          text-align: center;
          flex: 1;
        }
      }
    }
  }
}

.history-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .history-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
  }

  .history-list {
    .history-item {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .history-date {
        width: 80px;
        text-align: center;
        margin-right: 20px;

        .date {
          font-size: 14px;
          font-weight: 600;
          color: #333;
          margin-bottom: 5px;
        }

        .day {
          font-size: 12px;
          color: #999;
        }
      }

      .history-stats {
        flex: 1;

        .stat-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;

          &:last-child {
            margin-bottom: 0;
          }

          .stat-label {
            font-size: 14px;
            color: #666;
          }

          .stat-value {
            font-size: 14px;
            font-weight: 600;
            color: #333;
          }
        }
      }

      .history-status {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;

        &.completed {
          background: #e8f5e8;
          color: #52c41a;
        }

        &.partial {
          background: #fff7e6;
          color: #fa8c16;
        }
      }
    }
  }
}
</style> 